<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="贾文清">
    <title>轮播图</title>
    <style>
        * {
            box-sizing: border-box;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }
        .box img{
            width: 520px;
            height: 280px;
        }

        .img-list li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .img-list li.current {
            display: block;
        }

        .indicator {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 20px;
            display: flex;
            justify-content: center;
            color: white;
        }

        .indicator li {
            width: 20px;
            height: 20px;
            background-color: green;
            text-align: center;
            line-height: 20px;
            margin: 0 5px;
            border-radius: 50%;
        }

        .indicator li.active {
            background-color: red;
            cursor: pointer;
        }
        .img-click{
            display: none;
        }
        .img-click span {
            width: 30px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: calc(50% - 20px);
            cursor: pointer;
        }

        .img-click .prev {
            left: 0;
        }

        .img-click .next {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="img-list">
            <!-- (li>a[href=#]>img[src=img/$$.jpg])*5 -->
            <li class="current"><a href="#"><img src="./img/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/5.jpg" alt=""></a></li>
        </ul>
        <ul class="indicator">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    var index = 0;
    // 1: 展示图片 指示灯变红
    function showImage() {
        $('.img-list li').eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
        $('.indicator li').eq(index).addClass('active').siblings().removeClass('active');
    }
    //  上一张
    function prevImage() {
        index = index == 0 ? $('.indicator li').length - 1: index - 1;
        showImage();
    }
    //  下一张
    function nextImage() {
        index = index == $('.indicator li').length - 1 ? 0 : index + 1;
        showImage();
    }
    var timer = setInterval(nextImage, 1000);
    //2: 鼠标进入指示灯，图片停下来--根据鼠标选中的指示灯的索引来切换图片
    $('.indicator li').hover(function () {
        clearInterval(timer);
       // 记录和更新index的值
        index = $(this).index(); 
        showImage();
    });
    // 3:鼠标进入容器轮播图暂停下来,离开继续动
    $('.box').hover(function(){
        clearInterval(timer);
        timer = null;
        $('.img-click').show();
    },function(){
        timer = setInterval(nextImage, 1000);
         $('.img-click').hide();
    });
    // 4：给上下切换设置点击事件
    $('.prev').click(function(){
        prevImage();
    });
    $('.next').click(function(){
        nextImage();
    });
    








    // var index = 0;
    // var timer = setInterval(function () {
    //     index++;
    //     if (index == 5) {
    //         index = 0;
    //     }
    //     $('.img-list li').eq(index).show().siblings().hide();
    //     $('.indicator li').eq(index).addClass('active').siblings().removeClass('active');     
    // }, 1000);
    // // 鼠标进入指示灯变红，图片停下来
    //  $('.indicator li').hover(function(){
    //      clearInterval(timer);
    //      $(this).addClass('active').siblings().removeClass('active');
    //  },function(){
    //      $(this).removeClass('active');
    //      timer = setInterval(show(),1000);
    //  });

</script>